<style type="text/css">
.mv_warp{
	width:100%;
	background:#333;
	padding-top:10px;
	margin-top:10px;
	padding-bottom:10px;
}
.main_cnt{
	
	width:1200px;
	margin:auto;
	display:flex;
	flex-flow: row;
}
.play_warp{
	flex: 7;
	padding-right:10px;
}
.chat_warp{
	flex: 3;
}
.left_top{
	background:#fff;
	border-radius:5px;
	margin-bottom:10px;
	padding-top:10px;
	padding-left:15px;
}
.left_top .ctitle{
	font-size:17px;
	font-weight:bold;
}
.left_top .cmore{
	position:relative;
	height:80px;
}
.left_top .cmore .user_icon{
	position:absolute;
	width:60px;
	height:60px;
	border-radius:100%;
	object-fit: cover;
	left:0;
	top:10px;
}
.left_top .cmore .user_info{
	font-size:15px;
	position:absolute;
	left:80px;
	top:15px;
}
.left_top .cmore .user_info .time{
	margin-left:18px;
}
.left_top .cmore .guanzhu{
	position: absolute;
    top: 10px;
    cursor: pointer;
    right: 20px;
    width: 166px;
    height: 34px;
    border-radius: 17px;
    background-image: -moz-linear-gradient( 0deg, rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    background-image: -webkit-linear-gradient( 0deg,rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,151,58) 0%, rgb(255,98,37) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #ff963a, endColorstr = #ff6325);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 5px 0 5px 20px;
    box-sizing: border-box;
}
.left_top .cmore .guanzhu em {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(/public/static/images/ic_fol.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 3px;
    left: 3px;
}
.left_top .cmore .guanzhu span.num {
    margin-left: 36px;
    position: relative;
}
.left_top .cmore .guanzhu span.num:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ffc89f;
    position: absolute;
    left: -19px;
    top: 5px;
}
.left_top .cmore .zb_info{
	position:absolute;
	left:80px;
	bottom:12px;
	font-size:15px;
	background:green;
	color:#fff;
	padding:2px 10px;
	border-radius:3px;
}
.mv_player{
	background:#eee;
}
</style>
<div class="mv_warp">
	<ul class="main_cnt">
		<li class="play_warp">
			<div class="left_top">
				<div class="ctitle">{$info.title}</div>
				<div class="cmore">
					<a href="{:get_url('user',$info.uid)}" target="_blank"><img onerror="this.src='__STATIC__/images/noface.png'" class="user_icon" src="{:get_user_icon($info.uid)}"></a>
					<div class="user_info">作者：<a href="{:get_url('user',$info.uid)}" target="_blank">{:get_user_name($info.uid)}</a> <i class="time si si-speedometer"></i> 发布日期 {$info.create_time|format_time}</div>
					<div class="zb_info"><i class="time si si-speedometer"></i> 直播开始时间 {:format_time($info.start_time?:$info.create_time)}</div>
					<a href="{:urls('qun/content/show',['id'=>$info.ext_id])}" target="_blank"><div class="guanzhu"><em></em><span class="txt">关注</span><span class="num">{$info.view}</span></div></a>
				</div>
			</div>
			<div class="mv_player">
				<!-- 视频播放器 -->
				<div class="vod_mv">
					{php}$mvurl=is_array($info['mv_url'])?$info['mv_url'][0]['url']:$info['mv_url'];{/php}
					{if empty($info.zhibo_status)||$info.zhibo_status==3||($mvurl&&time()-$info['start_time']>3600*5)}
						{:fun('Player@play',$mvurl,'100%',600)}
					{/if}
				</div>

				<!--群聊直播预告的播放器框架,可以放在当前页面的任何位置 关键元素name="iframe_play" class="iframe_play" id="iframe_play" -->
				{if $info.zhibo_status==1||$info.zhibo_status==2}
					<iframe name="iframe_play" class="iframe_play" id="iframe_play" src="about:blank" style="height:400px;width:100%;display:none;" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>
				{/if}

			</div>
			<div class="left_bottom"></div>
		</li>
		<li class="chat_warp">
			<iframe name="iframe_msg" id="iframe_msg" src="{:urls('index/msg/index')}?uid={$info.ext_id?-$info.ext_id:$info.uid}" width="100%" style="height:100%;"  frameborder="0" allowfullscreen="true"></iframe>
		</li>
	</ul>
</div>
<script type="text/javascript">
function change_win(type){
	if(type){
		$(".main_cnt").css({width:'100%'});
	}else{
		$(".main_cnt").css({width:'1200px'});
	}
}
var vodMv='';
//var if_reset_height = false;
function open_play(url){	//打开播放器回调函数
	vodMv = $(".vod_mv").html();
	$(".vod_mv").html('');
	//if(!if_reset_height){	//重新调整高度
	//	if_reset_height = true;
	//	$(".chat_warp").html($(".chat_warp").html());
	//}
	var h = $(".play_warp").height();
	$("#iframe_msg").height(h);
	$("#iframe_msg")[0].contentWindow.set_chatwin_height();
	console.log("VOD高",h);
}
function close_play(){	//关闭播放器回调函数
	$(".vod_mv").html(vodMv);
}

$(function(){
	$("html,body").animate({scrollTop:$('.mv_warp ').offset().top},500);
});
</script>